<template>
	<view class="uni-pages">
		<z-paging ref="paging" v-model="dataList" @query="queryList" :refresher-enabled="false" :loading-more-enabled="false">
			<template slot="top">
				<u-navbar :borderBottom="false" :height="50" :isFixed="false" :is-back="true" back-icon-color="#4f4f4f"
					title-color="#333">
					<view class="flex justify-between align-center text-333 font-18 width-100 padding-lr-sm text-4f">
						<view class="font-weight-blod flex-1 flex justify-center align-center height-100 text-333">
							确认客户需求</view>
					</view>
				</u-navbar>
				<view class="bg-white padding">
					<view class="flex align-center text-82 padding-bottom-xs">
						<view class="font-16 text-333 font-weight-blod">太原市小店区梁栋诊所(X00001)</view>
					</view>
					<view class="flex align-center text-82 padding-bottom-xs font-12">
						<view class=" margin-right-sm ">用途</view>
						<view class=" ">购销/山西药九九</view>
					</view>
					
					<view class="flex align-center text-82 padding-bottom-xs font-14">
						<image src="/static/icon/concat-me.png" style="width: 44rpx;height: 44rpx;"
							class="margin-right-xs"></image>
						<view>太原市小店区益丰街永康小区2号门面</view>
					</view>
					
					<view class="flex align-center text-82 padding-bottom-xs font-14">
						<image src="/static/icon/concat-me.png" style="width: 44rpx;height: 44rpx;"
							class="margin-right-xs"></image>
						<view>客户/开票员/负责业务员</view>
					</view>
				</view>
			</template>
			<view class="margin-tb-sm padding bg-white">
				<view class="flex align-center font-16">
					<view class="margin-right-lg text-333">发货方</view>
					<view class="text-82">九州通｜山西药九九</view>
				</view>
			</view>
			
			<view class="margin-tb-sm padding bg-white">
				<view class="flex align-center font-16 justify-between">
					<view class="margin-right-lg text-333">优惠券</view>
					<view class="text-82">暂无可用优惠券</view>
				</view>
			</view>
			
			<view class="margin-tb-sm padding bg-white">
				<view class="flex align-center font-16 justify-between font-weight-blod text-333">
					客户支付方式
				</view>
				<view class="flex align-center font-14 justify-between padding-tb-sm text-333">
					<view class="flex align-center">
						<image class="margin-right-sm" src="/static/icon/yinpin.png" style="width: 50rpx;height: 40rpx;" mode="aspectFit"></image>
						<view class="">在线支付</view>
					</view>
					<view class="flex align-center">
						<view style="border:1px solid #828282;width: 18px;height: 18px;border-radius: 50%;"></view>
					</view>
				</view>
				<view class="flex align-center align-center text-82 font-14">
					基础核心证照超期无法使用在线支付
				</view>
				
				<view class="flex align-center font-14 justify-between padding-tb-sm text-333">
					<view class="flex align-center">
						<image class="margin-right-sm" src="/static/icon/yinpin.png" style="width: 50rpx;height: 40rpx;" mode="aspectFit"></image>
						<view class="">线下结算</view>
					</view>
					<view class="flex align-center">
						<view class="bg-main-yellow flex justify-center align-center"
							style="width: 18px;height: 18px;border-radius: 50%;">
							<text class="cuIcon-check"></text>
						</view>
					</view>
				</view>
				<view class="flex align-center align-center text-333 font-14 justify-between">
					<view>线下结算</view>
					<view class="flex align-center">
						<view class="margin-right-sm">客户资料维护的默认付款方式</view>
						<text class="cuIcon-right text-82"></text>
					</view>
				</view>
			</view>
			
			<view class="margin-tb-sm padding bg-white">
				<view class="flex align-center font-16 justify-between text-333">
					<view class="margin-right-lg ">商品合计</view>
					<view class="font-weight-blod">￥18.56</view>
				</view>
			</view>
			
			<view class="cu-form-group align-start">
					<view class="title">备注</view>
					<textarea maxlength="-1"  @input="textareaBInput" placeholder="请输入..."></textarea>
				</view>
			
			<template slot="bottom">				
				<view class="flex justify-between align-center bg-white " style="height: 100rpx;">
					<view class="flex align-center padding-left-sm">
						<text class="text-red font-18 font-weight-blod">￥14.72</text>
					</view>
					<view class="flex align-center height-100" @click="submitOrder">
						<view class="height-100 bg-main-yellow-2 flex justify-center align-center padding-lr-sm" >
							提交客户需求
						</view>
					</view>
				</view>
			</template>
		</z-paging>
		
		<view class="cu-modal" :class="showModal?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content font-weight-blod" style="color: #1D2129;font-size: 36rpx;">
						{{addShowType=='success'?"订单提交成功":"订单提交失败"}}
					</view>
					<!-- <view class="action" @tap="hideModal">
						<text class="cuIcon-close text-red"></text>
					</view> -->
				</view>
				<view class="padding-xl bg-white" style="padding-top: 0;">
					<view class="flex-column align-center justify-center font-16">
						<image src="/static/icon/yinpin.png" style="width: 300rpx;height: 300rpx;" mode="aspectFit"></image>
						<view class="cu-btn  round lg text-white width-100 margin-top-lg "
						 :class="addShowType=='success'?'bg-main-green':'bg-main-yellow-2'">查看订单</view>
						<view class="text-82 margin-top-sm">去购物车</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: 0,
				dataList: [],
				showModal: false,
				saveing: false,
				addShowType:"success"
			}
		},
		methods: {
			valChange(e) {
				console.log(e)
			},
			gotoSelectList(){
				uni.navigateTo({
						url:'/pages/zyt/shopList',
							})
			},
			submitOrder(){
				if(this.saveing){
					return
				}
				this.saveing = true
				//提交中
				uni.showLoading({
					title: '提交中...',
				})
				//模拟提交
				try{
					//报个错
					// throw new Error("报错了")
					setTimeout(()=>{
						uni.hideLoading()
						this.addShowType = "success"
						this.showModal = true
						
					},1000)
				}catch(e){
					setTimeout(()=>{
						uni.hideLoading()
						this.addShowType = "error"
						this.showModal = true
					},1000)
				}finally{
					this.saveing = false
					
				}
			},
			// @query所绑定的方法不要自己调用！！需要刷新列表数据时，只需要调用this.$refs.paging.reload()即可
			async queryList(pageNo, pageSize) {
				console.log(pageNo, pageSize)
				if (pageNo == 1) {
					let res = [{
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}, {
						id: 1
					}]
					this.$refs.paging.complete(res)

				} else {
					this.$refs.paging.complete([])
				}
				// if (!this.isLogin) {
				// 	this.$refs.paging.complete(false);
				// 	return;
				// }
				// try {
				// 	let data = await this.$http.post(this.$api.edu.getOnlineCourseSelectionList, {
				// 		key: this.dataForm.key,
				// 		studyId: this.dataForm.studyId ? this.dataForm.studyId : -1,
				// 	})
				// 	this.$refs.paging.complete(data.list)
				// } catch (e) {
				// 	this.$refs.paging.complete([]);
				// }

			},
		}
	}
</script>

<style scoped lang="scss">
	.uni-pages {
		height: 100vh;
		background-color: #F6F6F6;
	}

	.duiqi {
		text-align: justify;
		text-align-last: justify;
		width: 74rpx;
	}
</style>